<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #a{
        font-size:20px;
    }
    .b{
        font-size:16px;
        color:green;
    }
    #c{
        color:blue;
    }
    .d{
        color:green;
    }
</style>
<body>
    <div>
       <div id="a"><p>如梦令</p></div> 
       <div class = "b">
            <p1>昨夜雨疏风骤，浓睡不消残酒</p1><br>
            <p2>试问卷帘人，却道海棠依旧</p2><br>
            <p3>知否，知否，应是绿肥红瘦。</p3><br>
        </div>
        <div id = "c">译文</div>
        <div class="d">
            <p>昨天夜里雨点虽然稀疏，但是风却劲吹不停，我酣睡一夜，<br>
                然而醒来之后依然觉得还有一点酒意没有消尽。<br>
                于是就问正在卷帘的侍女，外面的情况如何，<br>
                她只对我说：“海棠花依旧如故”。
                知否？知否？应是绿肥红瘦。</p>
        </div>
    </div>
</body>
</html>